<template>
  <view class="job-detail-page">
    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 职位详情内容 -->
    <view v-else-if="jobDetail" class="job-content">
      <!-- 职位基本信息 -->
      <view class="job-header">
        <view class="job-title-row">
          <view class="job-title">{{ jobDetail.title }}</view>
          <view class="job-salary">{{ formatSalary(jobDetail.salaryMin, jobDetail.salaryMax) }}</view>
        </view>
        <view class="job-location">{{ jobDetail.city }} · {{ jobDetail.district }}</view>
        <view class="job-tags">
          <text class="tag" v-if="jobDetail.workExperience">{{ jobDetail.workExperience }}</text>
          <text class="tag" v-if="jobDetail.education">{{ jobDetail.education }}</text>
          <text class="tag">{{ formatWorkType(jobDetail.workType) }}</text>
        </view>
      </view>

      <!-- 公司信息 -->
      <view class="company-section">
        <view class="company-info">
          <image class="company-logo" :src="companyInfo.logo || '/static/default-company.png'" mode="aspectFill"></image>
          <view class="company-details">
            <view class="company-name">{{ companyInfo.companyName }}</view>
            <view class="company-meta">
              <text class="company-scale">{{ companyInfo.employeeCount }}</text>
              <text class="company-financing" v-if="companyInfo.financing">{{ companyInfo.financing }}</text>
            </view>
          </view>
          <text class="arrow">›</text>
        </view>
      </view>

      <!-- 职位详情 -->
      <view class="job-details-section">
        <view class="section-title">职位详情</view>
        <view class="skill-tags">
          <text class="skill-tag" v-for="skill in skillList" :key="skill">{{ skill }}</text>
        </view>
      </view>

      <!-- 岗位职责 -->
      <view class="job-responsibility-section">
        <view class="section-title">岗位职责</view>
        <view class="responsibility-content">
          <text class="responsibility-text">{{ jobDetail.responsibilities || jobDetail.description }}</text>
        </view>
      </view>

      <!-- 员工福利 -->
      <view class="welfare-section" v-if="jobDetail.welfare">
        <view class="section-title">员工福利</view>
        <view class="welfare-tags">
          <text class="welfare-tag" v-for="welfare in welfareList" :key="welfare">{{ welfare }}</text>
        </view>
      </view>

      <!-- 公司地址 -->
      <view class="location-section">
        <view class="location-info">
          <view class="location-title">
            <text class="company-name">{{ companyInfo.companyName }}</text>
            <text class="location-detail">{{ jobDetail.address || jobDetail.location }}</text>
          </view>
          <text class="arrow">›</text>
        </view>
        <!-- 地图容器 -->
        <view class="map-container">
          <map 
            class="map"
            :latitude="mapData.latitude"
            :longitude="mapData.longitude"
            :markers="mapData.markers"
            :scale="16"
            show-location
          ></map>
        </view>
        <view class="distance-info">
          <text class="distance">距离家距住{{ distanceText }}</text>
          <text class="change-address" @click="changeAddress">去修改</text>
        </view>
      </view>

      <!-- 竞争力分析 -->
      <view class="competition-section">
        <view class="section-header">
          <view class="section-title">你的竞争力分析</view>
          <text class="view-analysis" @click="viewDetailAnalysis">使用竞争力分析 ›</text>
        </view>
        
        <!-- 简历匹配度 -->
        <view class="resume-match">
          <view class="match-title">你与竞争者PK情况</view>
          <view class="match-avatars">
            <image class="avatar" v-for="(avatar, index) in competitorAvatars" :key="index" :src="avatar"></image>
          </view>
        </view>
        
        <!-- 投递建议 -->
        <view class="apply-suggestion">
          <view class="suggestion-title">三个月内共 {{ applyData.monthlyCount }} 人已投递，你超过 {{ applyData.percentage }}% 的竞争者，建议你可以</view>
        </view>
        
        <!-- 配置度进度条 -->
        <view class="config-progress">
          <view class="progress-title">你与配置匹配情况</view>
          <view class="progress-bar">
            <view class="progress-fill" :style="{ width: matchPercentage + '%' }"></view>
          </view>
          <view class="progress-text">{{ matchPercentage }}%</view>
        </view>
      </view>

      <!-- BOSS安全提示 -->
      <view class="safety-notice">
        <view class="notice-header">
          <text class="notice-icon">🛡️</text>
          <text class="notice-title">BOSS安全提示</text>
        </view>
        <view class="notice-content">
          <text class="notice-text">BOSS直聘严禁用人单位和招聘者用户做出任何损害求职者合法权益的违法违规行为，包括但不限于扣押求职者证件、收取求职者费用、向求职者集资、让求职者入股、诱导求职者异地入职、异地参与培训、违法违规使用求职者简历等，您一旦发现此类行为，请立即举报</text>
        </view>
      </view>
    </view>

    <!-- 错误状态 -->
    <view v-else class="error-container">
      <text class="error-text">加载失败，请重试</text>
      <button class="retry-btn" @click="loadJobDetail">重新加载</button>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <button class="chat-btn" @click="startChat">立即沟通</button>
    </view>
  </view>
</template>

<script>
// import { http } from '@/utils/request'
// import { formatSalary, formatWorkType } from '@/utils'

export default {
  name: 'JobDetailPage',
  data() {
    return {
      jobId: 1,
      jobDetail: {
        jobId: 1,
        companyId: 1,
        title: 'java高级研发工程师',
        salaryMin: 15,
        salaryMax: 18,
        city: '武汉',
        district: '洪山区',
        workExperience: '5-10年',
        education: '大专',
        workType: 1,
        skillsRequired: 'Java,Spring,MySQL,SpringCloud,PostgreSQL,SQL Server',
        responsibilities: '1.核心系统设计与开发：负责项目核心系统的设计与开发，确保高质量、高可维护性的代码实现；\n2.架构团队作业实现：与前端、产品、测试团队紧密合作，保障对支付及相关应用的开发进行全流程项目服务支援；\n3.主要能力与引导：总结分享后端开发经验，指导初中级工程师，提升团队技术能力和开发效率，推动高效交付。\n4.全链路开发与优化：参与马后端服务架构的完整开发流程，测试代码规范，运维部署，性能优化等，对系统进行持续重构。\n5.技术预研与落地：跟踪行业技术趋势，研究引入适合的新技术，提升开发效率和系统竞争力。',
        welfare: '节日福利,团建聚餐,带薪年假,全勤奖,绩效奖金,年终奖,生日礼金',
        address: '武汉市洪山区光谷创业中心16楼B区901',
        location: '武汉·洪山区·沙湖'
      },
      companyInfo: {
        companyId: 1,
        companyName: '威科智慧（武汉）电子商务有限公司',
        employeeCount: '20-99人',
        financing: '不需要融资',
        logo: '/static/default-company.png'
      },
      loading: false,
      isFavorited: false,
      skillList: ['Java', 'Spring', 'MySQL', 'SpringCloud', 'PostgreSQL', 'SQL Server'],
      welfareList: ['节日福利', '团建聚餐', '带薪年假', '全勤奖', '绩效奖金', '年终奖', '生日礼金'],
      mapData: {
        latitude: 30.4748,
        longitude: 114.4267,
        markers: [{
          id: 1,
          latitude: 30.4748,
          longitude: 114.4267,
          title: 'java高级研发工程师'
        }]
      },
      distanceText: '距离远17.6千米',
      competitorAvatars: [
        '/static/avatar1.png',
        '/static/avatar2.png', 
        '/static/avatar3.png',
        '/static/avatar4.png'
      ],
      applyData: {
        monthlyCount: 42,
        percentage: 85
      },
      matchPercentage: 68
    }
  },
  
  onLoad(options) {
    // 模拟接收参数
    if (options && options.id) {
      this.jobId = options.id
    }
    // 直接显示静态数据，不调用API
    this.processJobData()
  },
  
  methods: {
    // 加载职位详情
    async loadJobDetail() {
      // 不再调用API，直接使用静态数据
      console.log('使用静态数据显示职位详情')
    },
    
    // 处理职位数据
    processJobData() {
      // 数据已经在data中初始化，无需额外处理
      console.log('职位数据处理完成')
    },
    
    // 加载公司信息
    async loadCompanyInfo() {
      // 不再调用API，直接使用静态数据
      console.log('使用静态公司信息')
    },
    
    // 格式化薪资
    formatSalary(min, max) {
      if (!min || !max) return '面议'
      if (min === max) return `${min}K`
      return `${min}-${max}K`
    },
    
    // 格式化工作类型
    formatWorkType(type) {
      const types = {
        1: '全职',
        2: '兼职', 
        3: '实习',
        4: '远程'
      }
      return types[type] || '全职'
    },
    
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 切换收藏状态
    async toggleFavorite() {
      // 模拟切换收藏状态
      this.isFavorited = !this.isFavorited
      uni.showToast({
        title: this.isFavorited ? '收藏成功' : '已取消收藏',
        icon: 'success'
      })
    },
    
    // 分享职位
    shareJob() {
      uni.share({
        provider: 'weixin',
        scene: 'WXSceneSession',
        type: 0,
        href: `https://app.example.com/jobs/${this.jobId}`,
        title: this.jobDetail.title,
        summary: `${this.companyInfo.companyName} 招聘 ${this.jobDetail.title}`,
        imageUrl: this.companyInfo.logo,
        success: () => {
          uni.showToast({
            title: '分享成功',
            icon: 'success'
          })
        }
      })
    },
    
    // 显示更多选项
    showMoreOptions() {
      uni.showActionSheet({
        itemList: ['举报', '投诉'],
        success: (res) => {
          if (res.tapIndex === 0) {
            this.reportJob()
          } else if (res.tapIndex === 1) {
            this.complaintJob()
          }
        }
      })
    },
    
    // 举报职位
    reportJob() {
      uni.showToast({
        title: '举报功能开发中',
        icon: 'none'
      })
    },
    
    // 投诉职位
    complaintJob() {
      uni.showToast({
        title: '投诉功能开发中',
        icon: 'none'
      })
    },
    
    // 修改地址
    changeAddress() {
      uni.showToast({
        title: '地址修改功能开发中',
        icon: 'none'
      })
    },
    
    // 查看详细分析
    viewDetailAnalysis() {
      uni.showToast({
        title: '详细分析功能开发中',
        icon: 'none'
      })
    },
    
    // 开始聊天
    startChat() {
      uni.navigateTo({
        url: `/pages/chat/detail?jobId=${this.jobId}&companyId=${this.jobDetail.companyId}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.job-detail-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;

  .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400rpx;

    .loading-text {
      font-size: 28rpx;
      color: #999;
    }
  }

  .error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400rpx;

    .error-text {
      font-size: 28rpx;
      color: #999;
      margin-bottom: 32rpx;
    }

    .retry-btn {
      background-color: #007AFF;
      color: white;
      padding: 16rpx 32rpx;
      border-radius: 8rpx;
      border: none;
    }
  }

  .job-content {
    
    .job-header {
      background-color: #fff;
      padding: 40rpx 32rpx;
      margin-bottom: 20rpx;

      .job-title-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;
      }

      .job-title {
        font-size: 48rpx;
        font-weight: bold;
        color: #333;
        line-height: 1.3;
        flex: 1;
        margin-right: 20rpx;
      }

      .job-salary {
        font-size: 40rpx;
        font-weight: bold;
        color: #FF6B35;
        white-space: nowrap;
      }

      .job-location {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 24rpx;
      }

      .job-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 16rpx;

        .tag {
          background-color: #f8f9fa;
          color: #666;
          padding: 8rpx 16rpx;
          border-radius: 8rpx;
          font-size: 24rpx;
        }
      }
    }

    .company-section {
      background-color: #fff;
      margin-bottom: 20rpx;

      .company-info {
        display: flex;
        align-items: center;
        padding: 32rpx;

        .company-logo {
          width: 80rpx;
          height: 80rpx;
          border-radius: 16rpx;
          margin-right: 24rpx;
        }

        .company-details {
          flex: 1;

          .company-name {
            font-size: 32rpx;
            font-weight: 600;
            color: #333;
            margin-bottom: 8rpx;
          }

          .company-meta {
            display: flex;
            align-items: center;
            gap: 16rpx;

            .company-scale {
              font-size: 24rpx;
              color: #666;
            }

            .company-financing {
              background-color: #e6f4ff;
              color: #007AFF;
              padding: 4rpx 12rpx;
              border-radius: 8rpx;
              font-size: 22rpx;
            }
          }
        }

        .arrow {
          font-size: 32rpx;
          color: #ccc;
        }
      }
    }

    .job-details-section {
      background-color: #fff;
      padding: 32rpx;
      margin-bottom: 20rpx;

      .section-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 24rpx;
      }

      .skill-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 16rpx;

        .skill-tag {
          background-color: #e6f4ff;
          color: #007AFF;
          border: 1rpx solid #b3d8ff;
          padding: 12rpx 20rpx;
          border-radius: 8rpx;
          font-size: 24rpx;
        }
      }
    }

    .job-responsibility-section {
      background-color: #fff;
      padding: 32rpx;
      margin-bottom: 20rpx;

      .section-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 24rpx;
      }

      .responsibility-content {
        .responsibility-text {
          font-size: 28rpx;
          color: #666;
          line-height: 1.6;
        }
      }
    }

    .welfare-section {
      background-color: #fff;
      padding: 32rpx;
      margin-bottom: 20rpx;

      .section-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 24rpx;
      }

      .welfare-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 16rpx;

        .welfare-tag {
          background-color: #f0f9ff;
          color: #007AFF;
          padding: 12rpx 20rpx;
          border-radius: 8rpx;
          font-size: 24rpx;
        }
      }
    }

    .location-section {
      background-color: #fff;
      margin-bottom: 20rpx;

      .location-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 32rpx;

        .location-title {
          .company-name {
            font-size: 32rpx;
            font-weight: 600;
            color: #333;
            margin-bottom: 8rpx;
          }

          .location-detail {
            font-size: 24rpx;
            color: #666;
          }
        }

        .arrow {
          font-size: 32rpx;
          color: #ccc;
        }
      }

      .map-container {
        height: 400rpx;
        position: relative;

        .map {
          width: 100%;
          height: 100%;
        }
      }

      .distance-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24rpx 32rpx;
        border-top: 1rpx solid #f0f0f0;

        .distance {
          font-size: 24rpx;
          color: #666;
        }

        .change-address {
          font-size: 24rpx;
          color: #007AFF;
        }
      }
    }

    .competition-section {
      background-color: #fff;
      padding: 32rpx;
      margin-bottom: 20rpx;

      .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 32rpx;

        .section-title {
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
        }

        .view-analysis {
          font-size: 24rpx;
          color: #007AFF;
        }
      }

      .resume-match {
        margin-bottom: 32rpx;

        .match-title {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 16rpx;
        }

        .match-avatars {
          display: flex;
          gap: 8rpx;

          .avatar {
            width: 60rpx;
            height: 60rpx;
            border-radius: 50%;
          }
        }
      }

      .apply-suggestion {
        margin-bottom: 32rpx;

        .suggestion-title {
          font-size: 24rpx;
          color: #666;
          line-height: 1.5;
        }
      }

      .config-progress {
        .progress-title {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 16rpx;
        }

        .progress-bar {
          height: 16rpx;
          background-color: #f0f0f0;
          border-radius: 8rpx;
          overflow: hidden;
          margin-bottom: 8rpx;

          .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #007AFF 0%, #00D4FF 100%);
            transition: width 0.3s ease;
          }
        }

        .progress-text {
          font-size: 24rpx;
          color: #666;
          text-align: right;
        }
      }
    }

    .safety-notice {
      background-color: #fff;
      padding: 32rpx;
      margin-bottom: 20rpx;

      .notice-header {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;

        .notice-icon {
          font-size: 32rpx;
          margin-right: 12rpx;
        }

        .notice-title {
          font-size: 28rpx;
          font-weight: 600;
          color: #333;
        }
      }

      .notice-content {
        .notice-text {
          font-size: 24rpx;
          color: #666;
          line-height: 1.6;
        }
      }
    }
  }

  .bottom-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    padding: 24rpx 32rpx;
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    border-top: 1rpx solid #f0f0f0;

    .chat-btn {
      width: 100%;
      height: 88rpx;
      background: linear-gradient(90deg, #00C9A7 0%, #00B894 100%);
      color: white;
      border: none;
      border-radius: 44rpx;
      font-size: 32rpx;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>